<template>
    <div class="meis">
        <p><router-link tag="i" class="iconfont icon-left-" to="/"><s>aaaa</s></router-link><span class="iconfont icon-icon_sousuo-xian"></span></p>
        <swiper :options="swiperOption" ref="mySwiper" class="swiper_nav">
            <swiper-slide><router-link tag="li" to="/home">全部</router-link></swiper-slide>
            <swiper-slide><router-link tag="li" to="/edit">简餐便当</router-link></swiper-slide>
            <swiper-slide><router-link tag="li" to="">面食粥点</router-link></swiper-slide>
            <swiper-slide><router-link tag="li" to="">小吃炸串</router-link></swiper-slide>
            <swiper-slide><router-link tag="li" to="">香锅冒菜</router-link></swiper-slide>
            <swiper-slide><router-link tag="li" to="">汉堡披萨</router-link></swiper-slide>
            <swiper-slide><router-link tag="li" to="">地方菜系</router-link></swiper-slide>
            <swiper-slide><router-link tag="li" to="">日韩料理</router-link></swiper-slide>
            <swiper-slide><router-link tag="li" to="">轻食西餐</router-link></swiper-slide>
            <i class="iconfont icon-down- xjt"></i>
        </swiper>
        <router-view></router-view>
    </div>
    
</template>

<script>
export default {
    name:'meis',
     data() {
      return {
        swiperOption: {
            notNextTick: true,
            slidesPerView:4,
            direction : 'horizontal',
            grabCursor : true,
            setWrapperSize :true,
            autoHeight: true,
            pagination : '.swiper-pagination',
            paginationClickable :true,
            scrollbar:'.swiper-scrollbar',//滚动条
            mousewheelControl : true,
            observeParents:true,
            // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
            debugger: true,
        }
      }
    },
}
</script>

<style scoped lang="less">
.meis{
    height: 100vh;
    background: #f5f5f5; 
    p{
        display: flex;
        justify-content: space-between;
        background: #0096fd;
        height: 1.8rem;
        line-height: 1.8rem;
        color: #fff;
        i{
            padding-left: 0.5rem;
        }
        span{
            padding-right: 0.5rem; 
        }
    }
    .swiper_nav{
        display: flex;
        font-size: 0.42rem;
        text-align: center;
        background: #0096fd;
        height: 0.6rem;
        color: #fff;
    }
    .xjt{
        position: fixed;
        right: 0rem;
    }
}
    
</style>
